<template>
  <el-dialog
    v-if="couponItem"
    :visible.sync="dialogVisible"
    :title="`${couponItem.name}统计`"
    width="60%"
  >
    <div class="shadow-form">
      <el-form abel-position="right" label-width="140px" inline disabled>
        <div>
          <el-form-item label="券面值">
            <el-input
              :value="formTopData.preferenceNum | $cent2yuan"
            ></el-input>
          </el-form-item>
        </div>
        <el-form-item label="券总数">
          <el-input v-model="formTopData.num"></el-input>
        </el-form-item>
        <el-form-item label="券总金额">
          <el-input :value="formTopData.amount | $cent2yuan"></el-input>
        </el-form-item>
        <el-form-item label="已发券总数">
          <el-input v-model="formTopData.issueNum"></el-input>
        </el-form-item>
        <el-form-item label="已发券总金额">
          <el-input :value="formTopData.issueAmount | $cent2yuan"></el-input>
        </el-form-item>
        <el-form-item label="已使用券总数">
          <el-input v-model="formTopData.usedNum"></el-input>
        </el-form-item>
        <el-form-item label="已使用券总金额">
          <el-input :value="formTopData.usedAmount | $cent2yuan"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <el-form
      ref="listFilterRef"
      :model="list.filter"
      inline
      class="list-filter"
    >
      <el-form-item prop="phone">
        <el-input v-model="list.filter.phone" placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item prop="status">
        <KiSelect
          v-model="list.filter.status"
          placeholder="券状态"
          :options="couponStatusList"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="plain" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="table-list">
      <div class="table-operation">
        <div>
          <ExportExcel
            url="sot-admin-api/product/full-coupon/downloadStatisticList"
            :param="list.filter"
            :authBtn="false"
            size="small"
          />
          <el-button
            type="danger"
            @click="handleCancellationAll"
            :loading="ajaxLoading"
            size="small"
            v-if="formInline.status == 0 && couponItem.frontStatus != 2"
          >
            全部作废
          </el-button>
        </div>
        <el-pagination
          v-bind="elPaginationProps"
          :total="list.total"
          :currentPage.sync="list.filter.pageNo"
          :pageSize.sync="list.filter.pageSize"
        />
      </div>
      <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
        <el-table-column align="center" type="index" />
        <el-table-column label="领取人手机号" prop="phone" />
        <el-table-column label="券状态" prop="statusName" />
        <el-table-column label="领取时间" prop="distributeTime" />
        <el-table-column label="使用时间" prop="usedTime" />
        <el-table-column align="center" label="操作" width="320">
          <template slot-scope="{ row }">
            <!-- 单独作废某个人员的券，只有未使用状态的券可以作废 -->
            <el-button
              v-if="row.status == 0 && couponItem.frontStatus != 2"
              type="text"
              :disabled="ajaxLoading"
              @click="handleCancellation(row)"
            >
              作废
            </el-button>
            <!-- 券作废后可以取消作废 -->
            <el-button
              v-if="row.status == 6 && couponItem.frontStatus != 2"
              type="text"
              :disabled="ajaxLoading"
              @click="handleCancellationUndo(row)"
            >
              取消作废
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
let self = null
export default {
  name: 'coupon-statistics',
  mixins: [pageMixin],
  setup: () =>
    useAdmateAdapter({
      urlPrefix: 'sot-admin-api/product/full-coupon',
      axiosConfig: {
        getList: {
          url: 'queryUserCouponForPage'
        }
      },
      list: {
        filter: {
          phone: '',
          status: '',
          fullCouponId: ''
        }
      },
      getListProxy (getList, trigger) {
        if (self?.list?.filter?.fullCouponId) {
          getList()
        }
      }
    }),
  watch: {
    dialogVisible (n) {
      if (!n) {
        this.list.filter.fullCouponId = ''
      }
    }
  },
  data () {
    return {
      couponItem: null,
      // 券状态
      couponStatusList: [
        {
          dataName: '未使用',
          dataValue: '0',
          dataType: undefined
        },
        {
          dataName: '已使用',
          dataValue: '1',
          dataType: 'success'
        },
        {
          dataName: '已过期',
          dataValue: '2',
          dataType: 'danger'
        },
        {
          dataName: '已作废',
          dataValue: '6'
        }
      ],
      formInline: {
        phone: '',
        status: '',
        fullCouponId: ''
      },
      formTopData: {},
      submitLoading: false,
      dialogVisible: false,
      ajaxLoading: false
    }
  },
  created () {
    self = this
  },
  methods: {
    commites (url, arg) {
      this.$POST(url, arg)
        .then(res => {
          this.submitLoading = false
          this.dialogVisible = false
          this.$swal.success('提交成功')
        })
        .catch(err => {
          this.submitLoading = false
        })
    },
    async getDetails (id) {
      let { data } = await this.$POST(
        'sot-admin-api/product/full-coupon/queryStatisticInfo',
        { id: id }
      )
      this.formTopData = data
    },
    show (item) {
      this.couponItem = item
      this.dialogVisible = true
      this.list.filter.fullCouponId = this.couponItem.id
      this.$nextTick(() => {
        this.getDetails(this.couponItem.id)
        this.reset()
        // this.getList()
      })
    },
    /**
     * 全部作废
     * @return Void
     */

    handleCancellationAll () {
      const h = this.$createElement
      this.$msgbox({
        title: '全部作废优惠券',
        message: h('div', null, [
          h(
            'h3',
            { style: 'font-weight: bold;font-size:18px;margin:28px 0 12px;' },
            [
              h('span', {}, '是否确认全部作废'),
              h('span', { style: 'color: red;' }, '当前所有领取用户'),
              h('span', {}, '的优惠券？')
            ]
          ),
          h(
            'p',
            { style: 'color: red;font-size:14px;' },
            '● 作废优惠券，会导致该券不可使用'
          ),
          h(
            'p',
            { style: 'color: red;font-size:14px;' },
            '● 已使用的券不受影响'
          ),
          h(
            'p',
            { style: 'color: red;font-size:14px;' },
            '● 只会作废当前已领取到且未使用的券；未领取的券再领取后仍然可用'
          )
        ]),
        showCancelButton: true,
        confirmButtonText: '确认',
        cancelButtonText: '关闭',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            done()
          } else {
            done()
          }
        }
      }).then(action => {
        this.ajaxCancellationAll()
      })
    },
    /**
     * 全部作废AJAX
     * @return Void
     */

    ajaxCancellationAll () {
      if (this.ajaxLoading) {
        return false
      }
      this.ajaxLoading = true
      this.$POST('sot-admin-api/product/full-coupon/invalidAllUserCoupon', {
        fullCouponId: this.couponItem.id // 满减券id
      })
        .then(res => {
          if (res && res.errorCode == '00000') {
            this.$swal.success('全部作废成功')
          }
        })
        .finally(() => {
          this.ajaxLoading = false
          this.getList()
        })
    },
    /**
     * 作废
     * @param {Object} row
     * @return Void
     */

    handleCancellation (row) {
      const h = this.$createElement
      this.$msgbox({
        title: '作废优惠券',
        message: h('p', null, [
          h(
            'h3',
            { style: 'font-weight: bold;font-size:18px;margin:28px 0 12px;' },
            `是否确认作废【${row.phone}】的优惠券？`
          ),
          h(
            'p',
            { style: 'color: red;font-size:16px;margin-bottom:28px;' },
            '● 作废优惠券，会导致该券不可使用'
          )
        ]),
        showCancelButton: true,
        confirmButtonText: '确认',
        cancelButtonText: '关闭',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            done()
          } else {
            done()
          }
        }
      }).then(action => {
        this.ajaxCancellation(row)
      })
    },
    /**
     * 作废AJAX
     * @param {Object} row
     * @return Void
     */
    ajaxCancellation (row) {
      if (this.ajaxLoading) {
        return false
      }
      this.ajaxLoading = true
      this.$POST('sot-admin-api/product/full-coupon/invalidUserCouponById', {
        id: row.id
      })
        .then(res => {
          if (res && res.errorCode == '00000') {
            this.$swal.success('作废成功')
          }
        })
        .finally(() => {
          this.ajaxLoading = false
          this.getList()
        })
    },
    /**
     * 取消作废
     * @param {Object} row
     * @return Void
     */

    handleCancellationUndo (row) {
      if (this.ajaxLoading) {
        return false
      }
      this.ajaxLoading = true
      this.$POST(
        'sot-admin-api/product/full-coupon/cancelInvalidUserCouponById',
        { id: row.id }
      )
        .then(res => {
          if (res && res.errorCode == '00000') {
            this.$swal.success('取消作废成功')
          }
        })
        .finally(() => {
          this.ajaxLoading = false
          this.getList()
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 20px;
}
.shadow-form {
  background-color: #f8f8f8;
  padding: 18px 18px 0;
  border-radius: 2px;
  margin-bottom: 18px;
  margin-top: -15px;
}
</style>
